不用加载js jQuery
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>纯css3tab标签切换</title><style type="text/css">.tabs { position: relative; margin: 40px auto; width: 750px; } .tabs input { position: absolute; z-index: 1000; width: 130px; height: 40px; left: 0px; top: 0px; opacity: 0; cursor: pointer; }.tabs input#tab-2{ left: 140px;}.tabs input#tab-3{ left: 280px;}.tabs input#tab-4{ left: 420px;}.tabs label { background: #020518; font: bold 15px/40px Tahoma, Arial; position: relative; padding: 0 20px; float: left; width: 100px; color: #FFF; letter-spacing: 1px; text-transform: uppercase; text-align: center; text-shadow: 1px 3px 1px rgba(123, 119, 119, 0.3); border-radius: 3px 3px 0 0; box-shadow: 2px 0 2px rgba(0,0,0,0.1), -2px 0 2px rgba(0,0,0,0.1); } .tabs input:hover label { background: #A5109F; } .tabs label:first-of-type { z-index: 4; box-shadow: 2px 0 2px rgba(0,0,0,0.1); } .tab-label-2 { z-index: 3; } .tab-label-3 { z-index: 2; } .tab-label-4 { z-index: 1; } .tabs input:checked label { background: #fff; z-index: 6; color: #672055; } .content { background: #fff; position: relative; top: 42px; width: 100%; height: 390px; z-index: 5; box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.1); border-radius: 0 3px 3px 3px; font-family: Cambria, Georgia, serif; } .content div { position: absolute; top: 0; left: 0; padding: 20px; z-index: 1; opacity: 0; transition: all linear 0.1s; } .content div h2, .content div h3{ color: #398080; } .content div p { font-size: 16px; line-height: 22px; font-style: italic; text-align: left; margin: 0; color: #777; padding-left: 15px; } .tabs input.tab-selector-1:checked ~ .content .content-1, .tabs input.tab-selector-2:checked ~ .content .content-2, .tabs input.tab-selector-3:checked ~ .content .content-3, .tabs input.tab-selector-4:checked ~ .content .content-4 { z-index: 100; opacity: 1; transition: all ease-out 0.2s 0.1s; }</style></head><body><section class="tabs"> <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" /><label for="tab-1" class="tab-label-1">英雄联盟</label><input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" /><label for="tab-2" class="tab-label-2">地下城与勇士</label><input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" /><label for="tab-3" class="tab-label-3">穿越火线</label><input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" /><label for="tab-4" class="tab-label-4">御龙在天</label> <div class="clear-shadow"></div><div class="content"><div class="content-1"> <p>剑姬、阿木木、安妮、阿卡丽、艾克、蕾欧娜</p></div><div class="content-2"> <p>鬼剑、魔法师、格斗家、圣职者</p></div><div class="content-3"> <p>生化酒店、生化实验室、生化金字塔</p></div><div class="content-4"> <p>银枪、重剑、霸道、法师、弓箭、羽扇</p></div></div></section></body></html>
评论